<template>
    <div class="searchform-container">
        <div class="searchform__open">
            <div class="open__left">
                <el-form ref="searchformref" :inline="true" :model="searchForm">
                    <el-form-item v-for="item in formatOpenSearch" :key="item.key" :label="item.name" >

                        <!-- 输入框 -->
                        <template v-if="item.type === 'input'">
                            <el-input 
                                v-model="searchForm[`${ item.key }`]" 
                                :disabled="item.disabled"
                                :placeholder="item.placeholder || `请输入${ item.name }`">
                            </el-input>
                        </template>

                        <!-- 下拉选 -->
                        <template v-if="item.type === 'select'">
                            <el-select 
                                v-model="searchForm[`${item.key}`]" 
                                :placeholder="item.placeholder || `请选择${item.name}`"
                                :filterable="item.filterable"
                                :clearable="item.clearable"
                                :disabled="item.disabled"
                                @change="item.onChange">
                                <el-option v-for="selectItem in item.selectList" 
                                    :key="selectItem.key"
                                    :label="selectItem.name"
                                    :value="selectItem.key">
                                </el-option>
                            </el-select>
                        </template>

                        <!-- 单选框 -->
                        <template v-if="item.type === 'checkbox'">
                            <el-checkbox v-model="searchForm[`${item.key}`]" 
                                :disabled="item.disabled"
                                @change="item.onChange">
                            </el-checkbox>
                        </template>


                        <!-- 开关 -->
                        <template v-if="item.type === 'switch'">
                            <el-switch
                                v-model="searchForm[`${item.key}`]" 
                                :disabled="item.disabled"
                                @change="item.onChange">
                            </el-switch>
                        </template>


                        <!-- 日期选择器 -->
                        <template v-if="item.type === 'date'">
                            <el-date-picker
                                type="date"
                                v-model="searchForm[`${item.key}`]"
                                :placeholder="item.placeholder || '请选择日期'"
                                :picker-options="item.pickerOptions || {}"
                                :value-format="item.valueformat || 'timestamp'"
                                @change="item.onChange">
                            </el-date-picker>
                        </template>

                        <!-- 日期范围选择器 -->
                        <template v-if="item.type === 'daterange'">
                            <el-date-picker
                                type="daterange"
                                v-model="searchForm[`${item.key}`]"
                                :range-separator="item.separator || '至'"
                                :start-placeholder="item.startPlaceholder || '开始日期'"
                                :end-placeholder="item.endPlaceholder || '结束日期'"
                                :value-format="item.valueformat || 'timestamp'"
                                @change="item.onChange">
                            </el-date-picker>
                        </template>

                        <!-- 日期时间选择器 -->
                        <template v-if="item.type === 'datetime'">
                            <el-date-picker
                                v-model="searchForm[`${item.key}`]"
                                type="datetime"
                                :placeholder="item.placeholder || '请选择日期'"
                                :picker-options="item.pickerOptions || {}"
                                :value-format="item.valueformat || 'timestamp'"
                                @change="item.onChange">
                            </el-date-picker>
                        </template>

                        <!-- 日期时间范围选择器 -->
                        <template v-if="item.type === 'datetimerange'">
                            <el-date-picker
                                type="datetimerange"
                                v-model="searchForm[`${item.key}`]"
                                :range-separator="item.separator || '至'"
                                :start-placeholder="item.startPlaceholder || '开始日期'"
                                :end-placeholder="item.endPlaceholder || '结束日期'"
                                :value-format="item.valueformat || 'timestamp'"
                                @change="item.onChange">
                            </el-date-picker>
                        </template>

                    </el-form-item>
                </el-form>

                <template v-if="formatLeftGroup.length">
                    <el-button 
                        v-for="(item, index) in formatLeftGroup" :key="index"
                        :type="item.type"
                        :disabled="item.disabled"
                        :round="item.round"
                        @click="item.onClick">
                        {{ item.name }}
                    </el-button>
                </template>
            </div>

            <div class="open__right search-panel">
                <el-input v-model="searchForm[`${ searchpanel.key }`]" :placeholder="searchpanel.placeholder" class="search-panel-input" />
                <div type="primary" class="search-switch" @click="hideSearchForm = !hideSearchForm">
                    <i :class="hideSearchForm ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
                </div>
                <el-button type="primary" class="search-btn" @click="handleCommitSearchPamras(true)">查询</el-button>
            </div>
        </div>
        

        <el-collapse-transition>
            <div class="searchform__hide" v-show="hideSearchForm">
                <!--  label-position="top" -->
                <el-form ref="hideformref" :inline="true" :model="searchForm">
                    <el-form-item v-for="item in formatHideSearch" :key="item.key" :label="item.name" >

                        <!-- 输入框 -->
                        <template v-if="item.type === 'input'">
                            <el-input 
                                v-model="searchForm[`${ item.key }`]" 
                                :disabled="item.disabled"
                                :placeholder="item.placeholder || `请输入${ item.name }`">
                            </el-input>
                        </template>

                        <!-- 下拉选 -->
                        <template v-if="item.type === 'select'">
                            <el-select 
                                v-model="searchForm[`${item.key}`]" 
                                :placeholder="item.placeholder || `请选择${item.name}`"
                                :filterable="item.filterable"
                                :clearable="item.clearable"
                                :disabled="item.disabled"
                                @change="item.onChange">
                                <el-option v-for="selectItem in item.selectList" 
                                    :key="selectItem.key"
                                    :label="selectItem.name"
                                    :value="selectItem.key">
                                </el-option>
                            </el-select>
                        </template>

                        <!-- 日期范围选择器 -->
                        <template v-if="item.type === 'daterange'">
                            <el-date-picker
                                type="daterange"
                                v-model="searchForm[`${item.key}`]"
                                :range-separator="item.separator || '至'"
                                :start-placeholder="item.startPlaceholder || '开始日期'"
                                :end-placeholder="item.endPlaceholder || '结束日期'"
                                :value-format="item.valueformat || 'timestamp'"
                                @change="item.onChange">
                            </el-date-picker>
                        </template>

                        <!-- 日期时间范围选择器 -->
                        <template v-if="item.type === 'datetimerange'">
                            <el-date-picker
                                type="datetimerange"
                                v-model="searchForm[`${item.key}`]"
                                :range-separator="item.separator || '至'"
                                :start-placeholder="item.startPlaceholder || '开始日期'"
                                :end-placeholder="item.endPlaceholder || '结束日期'"
                                :value-format="item.valueformat || 'timestamp'"
                                @change="item.onChange">
                            </el-date-picker>
                        </template>

                    </el-form-item>
                </el-form>
            </div>
        </el-collapse-transition>
    </div>
</template>
<script>
    import { typeDefaultValue } from './util/dictionary'
    export default {
        name: 'QueryFormItem',
        components: {},
        props: {
            /**
             * 左侧按钮组
             */
            leftBtnGroup: {
                type: Array,
                default: () => []
            },

            /**
             * 
             * 支持form 类型
             * input select checkbox switch date daterange datetime datetimerange
             * 
             */
            openSearchProps: {
                type: Array,
                default: () => []
            },

            /**
             * 
             * 支持form 类型
             * input select daterange datetimerange
             * 
             */
            hideSearchProps: {
                type: Array,
                default: () => []
            },

            /**
             * 
             * 
             * 
             */
            searchpanel: {
                type: Object,
                default: () => {
                    return {
                        placeholder: '请输入关键字',
                        type: 'input',
                        key: 'name',
                    }
                }
            },

            /**
             * 
             * 输出的数据是否过滤空值，还是仍然保留字段，默认值参考
             * ./components/dictionary.js
             * 
             */
            filterEmpty: {
                type: Boolean,
                default: true
            }
        },
        data() {
            const defaultData = {}
            const searchPropsList = this.openSearchProps.concat(this.hideSearchProps).concat([this.searchpanel])
            searchPropsList.map(item => {
                const { defaultValue, key, type } = item
                if(defaultValue) {
                    defaultData[`${ key }`] = defaultValue
                } else {
                    defaultData[`${ key }`] = typeDefaultValue[type] || ''
                }
            })

            return {
                searchForm: JSON.parse(JSON.stringify(defaultData)),

                hideSearchForm: false
            }
        },
        computed: {
            formatLeftGroup() {
                if(!this.leftBtnGroup?.length) return []
                return this.leftBtnGroup.map(item => {
                    return Object.assign({
                        name: '未知按钮',
                        type: 'primary',
                        disabled: false,
                        round: false,
                    }, item)
                })
            },

            formatOpenSearch() {
                if(!this.openSearchProps?.length) return []
                return this.openSearchProps.map(item => {
                    return Object.assign({
                        onChange: () => {}
                    }, item)
                })
            },

            formatHideSearch() {
                if(!this.hideSearchProps?.length) return []
                return this.hideSearchProps.map(item => {
                    return Object.assign({
                        onChange: () => {}
                    }, item)
                })
            },
        },
        methods: {
            /**
             * type === true emit 带参数的数据，false 返回表单参数
             * @param {*} type 
             */
            handleCommitSearchPamras(type = false) {
                const { searchForm } = this
                // 过滤空参数
                if(this.filterEmpty) {
                    const keyList = Object.keys(searchForm)
                    const formatParmas = {}
                    keyList.forEach(item => {
                        const value = searchForm[item]
                        const valueType = Object.prototype.toString.call(value)
                        
                        if(valueType === '[object String]' && value) {
                            formatParmas[item] = value
                        }

                        if(valueType === '[object Array]' && value.length) {
                            formatParmas[item] = value
                        }

                        if(valueType === '[object Number]' && value !== null && value !== undefined) {
                            formatParmas[item] = +value
                        }
                        
                        if(valueType === '[object Boolean]' && value !== null && value !== undefined) {
                            formatParmas[item] = +value
                        }
                    })
                    // console.log('formatParmas', formatParmas)
                    if(type) {
                        this.$emit('search', formatParmas)
                    } else {
                        return formatParmas
                    }
                } else {
                    // console.log('searchForm', searchForm)
                    if(type) {
                        this.$emit('search', searchForm)
                    } else {
                        return searchForm
                    }
                    
                }
            },
        },
        beforeCreate() {

        },
        created() {

        },
        beforeMount() {

        },
        mounted() {
            
        },
        beforeDestroy() {
            
        },
    }
</script>

<style lang="scss">
.searchform-container {
    .search-panel {
        .search-panel-input {
            .el-input__inner {
                border-bottom-right-radius: 0;
                border-top-right-radius: 0;
            }
        }
    }

    .searchform__open {
        .el-form-item {
            margin-bottom: 0!important;
        }
    }

    .searchform__hide {
        .el-form-item {
            margin-top: 10px!important;
            margin-bottom: 0!important;
        }
    }

    .searchform__open, .searchform__hide {
        .el-input {
            width: 180px;
        }
    }
}

</style>

<style lang="scss" scoped>
.searchform-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    .searchform__open {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .open__left {
            display: flex;
            flex-direction: row;
        }
    }

    .searchform__hide {
        width: 100%;
    }
}


.search-panel {
    display: flex;
    align-items: center;
    height: 28px;
    .search-panel-input {
        width: 180px;
        .el-input__inner {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
        }
    }
    .search-switch {
        height: 100%;
        width: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        background-color: #ff7940;
        cursor: pointer;
    }
    .search-btn {
        vertical-align: top;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }
}
</style>